<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 导入分页插件文件 -->
    <script src="./libs/jquery.twbsPagination.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">文章列表</div>
      <div class="container-fluid common_con">
        <div class="row opt_btns">
          <div class="col-xs-6">
            <form class="form-inline">
              <select id="selCategory" name="" class="form-control input-sm">
                <option value="">所有分类</option>
                <option>未分类</option>
                <option>奇趣事</option>
                <option>会生活</option>
                <option>爱旅行</option>
              </select>
              <select id="selStatus" name="" class="form-control input-sm">
                <option value="">所有状态</option>
                <option value="草稿">草稿</option>
                <option value="已发布">已发布</option>
              </select>
              <button id="btnSearch" class="btn btn-default btn-sm">
                筛选
              </button>
            </form>
          </div>
          <div class="col-xs-6">
            <a
              href="article_release.html"
              class="btn btn-success btn-sm pull-right"
              id="release_btn"
              >发表文章</a
            >
          </div>
        </div>
        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>标题</th>
              <th>作者</th>
              <th>分类</th>
              <th class="text-center">发表时间</th>
              <th class="text-center">状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>王积千造统最头</td>
              <td>杰克</td>
              <td>奇趣事</td>
              <td class="text-center">2017-06-08 07:08:46</td>
              <td class="text-center">已发布</td>
              <td class="text-center">
                <a href="article_edit.html" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:void(0);"
                  class="btn btn-danger btn-xs delete"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="row text-center"></div>
      </div>
    </div>
    <!-- 准备分页插件容器标签 -->
    <div class="row text-center">
      <!-- 准备分页插件容器标签 -->
      <ul id="pagination" class="pagination-sm"></ul>
    </div>
    <script src="./libs/https.js"></script>
    <!-- 准备下拉框列表模板 -->
    <script type="text/html" id="tpl-category">
      <option value="">所有分类</option>
      {{each data v}}
      <option value="{{v.id}}">{{v.name}}</option>
      {{/each}}
    </script>

    <!-- 文章列表模板结构 -->
    <script type="text/html" id="tpl-list">
      {{each data.data v}}
      <tr>
        <td>{{v.title}}</td>
        <td>{{v.author}}</td>
        <td>{{v.category}}</td>
        <td class="text-center">{{v.date}}</td>
        <td class="text-center">{{v.state}}</td>
        <td class="text-center">
          <a
            href="article_edit.html?articleId={{v.id}}"
            class="btn btn-default btn-xs"
            data-id="{{v.id}}"
            >编辑</a
          >
          <a
            href="javascript:void(0);"
            class="btn btn-danger btn-xs delete"
            data-id="{{v.id}}"
            >删除</a
          >
        </td>
      </tr>
      {{/each}}
    </script>

    <script>
      //入口函数
      $(function () {
        //发起ajax请求 获得所有分类数据
        $.ajax({
          type: "get",
          url: BigNew.category_list,
          success: function (backData) {
            if (backData.code == 200) {
              //结合模板引擎,生成标签结构
              let htmlStr = template("tpl-category", backData);
              $("#selCategory").html(htmlStr);
            }
          },
        });
        // 准备一个全局变量,来保存当前被选中的页码
        let selPage = 1;
        // 封装函数:获得指定数据渲染结构
        //先有数据后有分页插件
        //page 是参数:当前被选中的页码
        function loadData(page) {
          //发起ajax请求 获得指定数据
          $.ajax({
            type: "get",
            url: BigNew.article_query,
            data: {
              //类别以及状态,通过下拉框获取
              type: $("#selCategory").val(),
              state: $("#selStatus").val(),
              //请求的指定页码的数据
              page: page,
              //每页显示多少条数据
              perpage: 5,
            },
            success: function (backData) {
              // console.log(backData);
              if (backData.code == 200) {
                //判断是否有数据如果有数据则需要渲染结构以及设置分页
                // 如果没有数据,则不需要结构也不需要分页,显示文本提示
                if (backData.data.totalCount > 0) {
                  //有数据
                  //结合模板引擎生成标签结构
                  let htmlStr = template("tpl-list", backData);
                  $("tbody").html(htmlStr);
                  //加载完数据后再加载分页导航
                  // 特点: 分页导航插件的属性,只有第一次设置的时候才是有效的
                  // 第一次设置的总页数是44页,那么后面就永远都是44页
                  // 需求: 每次筛选完数据之后,都能以最新的数据来渲染页面
                  // 再设置分页导航之前,先摧毁之前的分页导航
                  $("#pagination").twbsPagination("destroy");
                  $("#pagination").twbsPagination({
                    //总页数 ,由返回的数据总页数决定
                    totalPages: backData.data.totalPage,
                    //当前可见页数范围
                    visiblePages: 10,
                    //开始被选中的页码
                    startPage: page,
                    //关闭插件初次自动点击的效果,避免后期陷入递归(递去归来)
                    initiateStartPageClick: false,
                    //修改按钮的文本
                    first: "首页",
                    prev: "上一页",
                    next: "下一页",
                    last: "尾页",
                    //当选中不同页码的时候 要请求不同页数的数据
                    onPageClick: function (event, page) {
                      //将当前页面变成全局变量
                      // console.log(page);
                      selPage = page;
                      //page 是当前被点击的页码
                      //请求当前被点击页码的数据
                      loadData(selPage);
                    },
                  });
                } else {
                  //没有数据
                  //tbody内容要清空,分页导航就不需要设置,文本提示
                  $("tbody").empty();
                  $("#pagination").html("当前类别没有任何数据,请重新筛选...");
                }
              }
            },
          });
        }
        //页面首次加载 调用 loadData()
        //所以类别所以状态默认请求第一页
        loadData(1);
        //设置筛选按钮点击事件
        $("#btnSearch").on("click", function (e) {
          e.preventDefault();
          //调用函数获得指定类型的数据
          loadData(1);
        });
        //给所有删除按钮设置委托事件
        $("tbody").on("click", ".delete", function () {
          //获得当前按钮的dataid
          let dataid = $(this).attr("data-id");
          //发起ajax请求,删除指定的数据
          $.ajax({
            type: "post",
            url: BigNew.article_delete,
            data: {
              id: dataid,
            },
            success: function (backData) {
              console.log(backData);
              if (backData.code == 204) {
                //删除成功之后应该做什么事情
                // 重新加载数据,在哪里删除就应该在哪里加载
                // 删除数据的时候,对页码会不会有影响: 如果删除的是最后一页最后一条,则应该加载上一页的数据
                // 判断当前的tbody中的tr是否大于1
                if($('tbody tr').length >1 || selPage == 1){
                    // 不是最后一条,对页码没有影响
                    loadData(selPage)
                }else{
                    //是最后一条,则应该加载上一页数据
                    selPage = selPage-1;
                    loadData(selPage);
                }
              }
            },
          });
        });
        $('#release_btn').on('click',function(){
          //找到父页面的二级菜单li标签(发表文章按钮,设置选中效果)
          parent.$('.level02 li').eq(1).click();
        })
      });
    </script>
  </body>
</html>
